<template>
  <div class="order-code item-block"
        v-if="detail.status == 2 && detail.is_dhs_virtual != 1 && detailAll.is_dz_one == 1 && detail.is_self_take == 1 && detail.self_type == 2 && detail.status_name!='等待拼团成功'">
    <ul class="code-change clearfix">
      <li class="barCode fl"
          :class="[type == 1 ? 'color':'']"
          @click="selectCode(1)">
        <span>条形码&二维码</span>
      </li>
      <li class="qrCode fl"
          :class="[type == 2 ? 'color':'']"
          @click="selectCode(2)">
        <span>微信扫码</span>
      </li>
    </ul>
    <div class="bar-qrCode"
          v-show="type == 1">
      <p class="barCode">
        <img :src="barCode" />
      </p>
      <p class="qrCode">
        <img :src="qrCode" />
      </p>
      <p class="writeoff_time" v-if="detailAll.store.verification_expire_time">请于{{ detailAll.store.verification_expire_time }}前到店核销，过期作废</p>
      <p class="writeoff_description" v-if="detailAll.store.verification_mark">{{ detailAll.store.verification_mark }}</p>
    </div>
    <div class="wxCode"
          v-show="type == 2">
      <p class="wxCode">
        <img :src="wxCode" />
      </p>
      <p class="writeoff_time" v-if="detailAll.store.verification_expire_time">请于{{ detailAll.store.verification_expire_time }}前到店核销，过期作废</p>
      <p class="writeoff_description" v-if="detailAll.store.verification_mark">{{ detailAll.store.verification_mark }}</p>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import small from '@/smallapp/small'
export default Vue.extend({
  props: {
    detailAll: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {
    detail() {
      return this.detailAll.detail
    },
    barCode() {
      // /Public/BarCode/text/20200701144017499161/sid/6.html?pid=7205
      // return `http://m.newfx.wxfenxiao.com//Public/BarCode/text/${this.detailAll.detail.barcode}/sid/${this.$store.getters.sid}.html?pid=${this.$store.getters.pid}`
      return `${wx.getExtConfigSync().appApiUrl?wx.getExtConfigSync().appApiUrl:''}/Public/BarCode/text/${this.detailAll.detail.barcode}/sid/${this.sid}.html?pid=${this.pid}`
    },
    qrCode() {
      // return `http://m.newfx.wxfenxiao.com//Public/qrcode/text/${this.detailAll.detail.barcode}/sid/${this.$store.getters.sid}.html?pid=${this.$store.getters.pid}`
      return `${wx.getExtConfigSync().appApiUrl?wx.getExtConfigSync().appApiUrl:''}/Public/qrcode/text/${this.detailAll.detail.barcode}/sid/${this.sid}.html?pid=${this.pid}`
    },
    wxCode() {
      // /Public/verifyOrderQrCode/verify_order_code/20200701144017499161/sid/6.html?pid=7205
      // return `http://m.newfx.wxfenxiao.com//Order/verifyOrderQrCode/verify_order_code/${this.detailAll.detail.barcode}/sid/${this.$store.getters.sid}.html?pid=${this.$store.getters.pid}`
      return `${wx.getExtConfigSync().appApiUrl?wx.getExtConfigSync().appApiUrl:''}/Public/verifyOrderQrCode/verify_order_code/${this.detailAll.detail.barcode}/sid/${this.sid}.html?pid=${this.pid}`
    }
  },
  data() {
    return {
      type: 1,
      sid:'',
      pid:''
    }
  },
  created() {
    this.type = this.detailAll.verification_code_display
    const global_login_info= small.wxCache('global_login_info') ? small.wxCache('global_login_info') : ''
    // console.log('global_login_info',global_login_info)
    if(global_login_info){
      this.sid=global_login_info.shop_id
      this.pid=global_login_info.uid
    }
  },
  methods: {
    // 条码 二维码
    selectCode(type) {
      this.type = type
    }
  }
})
</script>

<style lang="scss">
@import "src/styles/order/detail";
/* @import "src/styles/variables.scss";
@import "src/styles/mixin"; */
.order-code {
  text-align: center;
  .code-change {
    width: 100%;
    height: 80px;
    overflow: hidden;
    li {
      height: 100%;
      width: 50%;
      padding: 20px 0;
      border: 2px solid #EDEDED; 
      box-sizing: border-box;
      &:first-child{
        border-radius: 40px 0 0 40px;
        border-right: 0;
      }
      &:last-child{
        border-radius: 0 40px 40px 0;
        border-left: 0;
      }
      span {
        font-size: 28px;
        color: #333;
      }
      &.color {
        background-color: #F30C23;
        border-color: #F30C23;
        span {
          color: #fff;
        }
      }
    }
  }
  .writeoff_time{
    font-size: 24px;
    color: #333;
    margin: 48px 0 24px;
  }
  .writeoff_description{
    font-size: 24px;
    color: #999;
    line-height: 40px;
  }
  .bar-qrCode {
    padding: 30px 0 0 0;
    // border-bottom: 2px dashed #E6E6E6;
    .barCode {
      height: 200px;
      margin-top:20px;
      padding:0 20px;
      img {
        height: 100%;
        max-width: 100%;
      }
    }
    .barcode-tip {
      margin-top: 28px;
      font-size: 28px;
      color: #666666;
    }
  }
  .wx-code {
    padding: 40px 120px;
    border-bottom: 2px dashed #E6E6E6;
    img {
      width: 100%;
      margin: 0 auto;
    }
  }
}
</style>